---
image: /generated/articles-docs-transitions-presentations-flip.png
crumb: "@remotion/transitions - Presentations"
title: "flip()"
---

# flip()<AvailableFrom v="4.0.54"/>

A presentation where the exiting slide flips by 180 degrees, revealing the next slide on the back side.

<Demo type="flip" />

## Example

```tsx twoslash title="SlideTransition.tsx"
import { AbsoluteFill } from "remotion";

const Letter: React.FC<{
  children: React.ReactNode;
  color: string;
}> = ({ children, color }) => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: color,
        opacity: 0.9,
        justifyContent: "center",
        alignItems: "center",
        fontSize: 200,
        color: "white",
      }}
    >
      {children}
    </AbsoluteFill>
  );
};
// ---cut---
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { flip } from "@remotion/transitions/flip";

const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={flip()}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};
```

## API

Takes an object with the following properties:

### `direction`

One of `from-left`, `from-right`, `from-top`, `from-bottom`.

```tsx twoslash title="TypeScript type"
import { FlipDirection } from "@remotion/transitions/flip";

const flipDirection: FlipDirection = "from-left";
```

### `perspective?`

The CSS `perspective` of the flip animation. Defaults to `1000`.

### `outerEnterStyle?`<AvailableFrom v="4.0.84"/>

The style of the outer element when the scene is is entering.

### `outerExitStyle?`<AvailableFrom v="4.0.84"/>

The style of the outer element when the scene is exiting.

### `innerEnterStyle?`<AvailableFrom v="4.0.84"/>

The style of the inner element when the scene is entering.

### `innerExitStyle?`<AvailableFrom v="4.0.84"/>

The style of the inner element when the scene is exiting.

## See also

- [Source code for this presentation](https://github.com/remotion-dev/remotion/blob/main/packages/transitions/src/presentations/flip.tsx)
- [Presentations](/docs/transitions/presentations)
